<template>
	<view class="main-container">
		<view class="layout">
			<view class="box box-background1" @click="goto('/pages/stockin/receive/index')">
				<image class="store-image" src="../../static/index/cgrk.png"></image>
				<text class="store-text">验收入库</text>
			</view>
			<view class="box box-background2" @click="goto('/pages/stockin/return/index')">
				<image class="store-image" src="../../static/index/ghrk.png"></image>
				<text class="store-text" box-background13>归还入库</text>
			</view>
			<view class="box box-background3" @click="goto('/pages/stockin/index')">
				<image class="store-image" src="../../static/index/zcrk.png"></image>
				<text class="store-text">普通入库</text>
			</view>
			<view class="box box-background4" @click="goto('/pages/stockout/useout/index')">
				<image class="store-image" src="../../static/index/lyck.png"></image>
				<text class="store-text">领用出库</text>
			</view>
			<view class="box box-background5" @click="goto('/pages/stockout/urgent/index')">
				<image class="store-image" src="../../static/index/jjck.png"></image>
				<text class="store-text">紧急出库</text>
			</view>
			<view class="box box-background6" @click="goto('/pages/transfer/plan/index')">
				<image class="store-image" src="../../static/index/jhyc.png"></image>
				<text class="store-text">计划移仓</text>
			</view>
			<view class="box box-background7" @click="goto('/pages/transfer/realtime/index')">
				<image class="store-image" src="../../static/index/ssyc.png"></image>
				<text class="store-text">实时移仓</text>
			</view>

			<view class="box box-background8" @click="goto('/pages/stocktaking/plan/index')">
				<image class="store-image" src="../../static/index/jhpd.png"></image>
				<text class="store-text">计划盘点</text>
			</view>
			<view class="box box-background9" @click="goto('/pages/stocktaking/realtime/index')">
				<image class="store-image" src="../../static/index/sspd.png"></image>
				<text class="store-text">实时盘点</text>
			</view>
			<view class="box box-background10" @click="goto('/pages/stock/index')">
				<image class="store-image" src="../../static/index/kccx.png"></image>
				<text class="store-text">库存查询</text>
			</view>
			<view class="box box-background11" @click="goto('/pages/profitloss/index')">
				<image class="store-image" src="../../static/index/bsby.png"></image>
				<text class="store-text">报损报益</text>
			</view>
		</view>
		<view class="jszc">单位：贵州省普定发电公司</view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	 
	const goto = (url) => {
		uni.navigateTo({
			url: url
		});
	}
</script>

<style lang="scss" scoped>

	.main-container {
		width: 100%;
		height: 100%;

		// height: 90%;
		background: linear-gradient(to right, #F2DEB2, #DEE8E8, #F7F0F7);

		.layout {
			margin: 0rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			padding: 35rpx;
			box-shadow: 0 20rpx 60rpx 0 rgba(0, 47, 157, 0.10);
			justify-content: space-between;
			// height: 900rpx;
			border-radius: 10rpx;
			// margin: 0, auto;
			background-color: #D1DEE3;
			box-shadow: 0, 0 10rpx rgba(0, 0, 0, 0.05);
			//gird布局，两端对齐，最后一行左对齐
			display: grid;
			// grid-template-columns: repeat(3, 1fr);
			grid-template-columns: 1fr 1fr 1fr;
			gap: 15rpx;

			.box {
				height: 200rpx;
				width: 200rpx;
				// aspect-ratio: 1/1;//正方形，不用设置宽高 app不支持
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// color: red;
			}

			.box-background1 {

				background: linear-gradient(#FEEBF1, #E8F5F2 40%);

			}

			.box-background2 {
				background: linear-gradient(#D3EAF2, #DBE5E0 40%);
			}

			.box-background3 {
				background-color: #E8F7FE;
			}

			.box-background4 {
				background-color: #FEF4F2;
			}

			.box-background5 {
				background-color: #FCEBF1;
			}

			.box-background6 {
				background-color: #B7E0FC;
			}

			.box-background7 {
				background-color: #EDF8FC;
			}

			.box-background8 {
				background: linear-gradient(to top, #F2DEB2 40%, #F7F0F7);
			}

			.box-background9 {
				background: linear-gradient(to top, #D6E3C9 60%, #F5E8E8);
			}

			.box-background10 {
				background: linear-gradient(to top, #F5DBEA 40%, #E5F2F5);
			}

			.box-background11 {
				background: linear-gradient(to top, #F2DEB2 40%, #F7F0F7);
			}

			.store-image {
				display: inline-block;
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				vertical-align: middle;
				margin-bottom: 50rpx;
			}
			.store-text {
				position: absolute;
				margin-top: 100rpx;
			}
		}

	}

	.titleTop {
		background-color: $uni-spacing-col-base;
		width: 100%;
		height: 50rpx;
	}
</style>